<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view style="background-color: #F5F5F5;height: 100vh;" v-show="!loadingone">
			<navbar name="选择店铺地址"></navbar>
			<!-- 店铺地址 -->
			<view style="width: 100%;background-color:#F5F5F5;padding: 1upx 0upx; ">
				<view class="store-address-box" @tap="handleTap('picker3')">
					<view class="store-address-left">
						<view class="store-address-img">
							<image src="https://bsyjk-pic.bsyjk.cn/l/70F3551718894962A77F7584746B49A9.png"
								style="width: 28upx;height: 36upx;" mode=""></image>
						</view>
						<view class="store-address-text ellipsis">
							{{label3}}
						</view>
					</view>
					<view class="store-address-right">
						<image src="https://bsyjk-pic.bsyjk.cn/l/15D1EDF8F688493481928F6E23EF6179.png"
							style="width: 31upx;height: 18upx;" mode=""></image>
					</view>
				</view>

				<view class="shop-all-box">
					<view v-for="(item,index) in records" :key="index">
						<view class="shop-every-list" @tap="detailPage(item,'NAV',index)">
							<view class="shop-top">
								<view class="shop-name">
									<!-- 百岁健康之家（太阳店） -->
									{{item.storeName}}
								</view>
								<view class="shop-dress ellipsis">
									{{item.distance}}km | {{item.address?item.address:''}}
								</view>
							</view>
							<view class="right-j-img" @tap.stop="detailPage(item,'GPS',index)">
								<image src="https://bsyjk-pic.bsyjk.cn/l/C81A1C2F29CC411B936050CB72CC9571.png"
									style="width: 18upx; height: 30upx;" mode=""></image>
							</view>
						</view>
						<view class="lines"></view>
					</view>
				</view>

				<view style="height: 100upx;"></view>


			</view>




			<lb-picker ref="picker3" v-model="value3" mode="multiSelector" :list="list1" :level="3"
				:dataset="{ name: 'label3' }" @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
			</lb-picker>
		</view>
	</view>
</template>

<script>
	import areaData from '@/common/area-data-min.js'
	import lbPicker  from '@/pages/subpackage/components/lb-picker/index';
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

	export default {
		components: {
			lbPicker,
			uLoading,
		},
		data() {
			return {
				loadingone: false,
				value3: [],
				label3: '',
				list1: areaData,
				storeValue: '建邺区',
				pageCurrent: 1,
				pageSize: 10,
				records: [], //获取到店
			};
		},
		onLoad(e) {
			// 南京市
			// 江苏省
			// console.log(e)
			this.label3 = e.province + '-' + e.city + '-' + e.district;
			let provinceData = uni.getStorageSync('provinceData');
            console.info(provinceData,"provinceData")
			if(this.timeFunction(provinceData.time,new Date())||e.province!=provinceData.provinceName||
			e.city!=provinceData.cityName||provinceData.cityName !=e.district){//大于一个小时
				this.storeMd(e.province, e.city, e.district, this.pageCurrent, this.pageSize)
                console.info(provinceData,"provinceData2")
			}else{//小于
				this.shopnewGet(provinceData.provinceName,provinceData.cityName,provinceData.countyName,provinceData.result)
                                  console.info(provinceData,"provinceData")
			}
		},
		methods: {
			timeFunction(start_date,end_date) {
				// console.log(start_date,end_date,'933333')
				var days = new Date(end_date).getTime() - new Date(start_date).getTime();
				var month = parseInt(days / (1000 * 60 * 60));
				console.log(month,'小时')
				let is_buxin 
				if (month >= 1) {//大于一个小时
					is_buxin = true
				}else{
					is_buxin = false
				}
				return is_buxin
			},
			shopnewGet(provinceName,cityName,countyName,result){
                
				let _this = this;
				this.$shopnew.get(global.apiUrls.storeMd + '?areaName=&cityName=' + cityName +
					'&countyName=' + countyName + '&keyword=&merchantName=&pageCurrent=' +
					this.pageCurrent + '&pageSize=' +
					this.pageSize +
					'&provinceName=' + provinceName + '&storeName=' + '&latitude=' + result.lat +
					'&longitude=' + result.lng, {}).then(res => {
					if (res.data.code == 1000) {
						let records = res.data.result.records;
						for (let i = 0; i < records.length; i++) {
							records[i].distance = parseInt(records[i].distance / 1000);
						}
						_this.records = records;
					}
				})
			},
			storeMd(provinceName, cityName, countyName, pageCurrent, pageSize) {
				this.loadingone = true
				let _this = this;
                let provinceData = uni.getStorageSync('provinceData');
                let locationLable = provinceData?[provinceData.provinceName,provinceData.cityName,provinceData.countyName]:this.label3.split("-")
				uni.request({
					url: 'https://api.map.baidu.com/geocoding/v3/?ak=geAHmFnsMXHznodHHxmXhHuC0QQzN9Ex&output=json&address=' +
						locationLable[0] + locationLable[1] + locationLable[2],
					success: (res) => {
						_this.loadingone = false
						let result = res.data.result.location;
                        console.info(uni.getStorageSync('provinceData'),"uni.getStorageSync('provinceData')")
                        if(!uni.getStorageSync('provinceData')){
                            uni.setStorageSync('provinceData', {
                            	time: new Date(),
                            	result: result,
                            	provinceName:provinceName,
                            	cityName:cityName,
                            	countyName:countyName
                            })
                        }
                        
						
						_this.shopnewGet(provinceName,cityName,countyName,result)
						// console.log(result, '922222222')
						
					},
					fail:(err)=>{
						_this.loadingone = false
					}
				});

			},
			handleTap(picker) {
				this.$refs[picker].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				let item = e.item;
				this.storeMd(item[0].label, item[1].label, item[2].label, this.pageCurrent, this.pageSize)
               
				if (e) {
					const name = e.dataset.name
					const label = e.item.map(m => m.label).join('-')
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			//导航
			chooseDress(latitude, longitude) {
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					scale: 18
				})
			},
			// 使用导航
			detailPage(item, type, index) {
				console.info(item,"detailPage-->")
				if (type == 'GPS') {
					item.latitude = Number(item.latitude);
					item.longitude = Number(item.longitude);
					this.chooseDress(item.latitude, item.longitude)
				} else {
					uni.navigateBack({
						delta: 1
					});
					setTimeout(() => {
						let label3 = this.label3.split('-');
						uni.$emit('locationres', {
							province: label3[0],
							city: label3[1],
							district: label3[2]?label3[2]:'',
							storeId:item.storeId,
                            storeName:item.storeName,
							thisindex: index
						})
					}, 1000);
				}
				// uni.navigateTo({
				// 	url: '/pages/subpackage/home/map/map?latitude='+item.latitude+'&longitude='+item.longitude
				// })
			}
		}
	}
</script>

<style lang="scss">
   .ellipsis {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 630upx;
    }
	.store-address-box {
		width: 706upx;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-radius: 25upx;
		overflow: hidden;
		margin-left: 22upx;
		margin-top: 30upx;
      
		.store-address-left {
			display: flex;
			align-items: center;
			width: 606upx;

			.store-address-img {
				width: 28upx;
				height: 36upx;
				margin-left: 30upx;
			}

			.store-address-text {
				width: 420upx;
				margin-left: 32upx;
				font-size: 36upx;
				font-weight: 400;
				color: #333333;

			}
		}


		.store-address-right {
			width: 100upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			box-shadow: -2upx 1upx 23upx 3upx rgba(0, 0, 0, 0.06);
		}
	}

	.shop-all-box {
		padding: 0upx 38upx;
		margin-top: 30upx;
		width: 702upx;
		background-color: #FFFFFF;
		border-radius: 16upx;
		margin-left: 24upx;

		.shop-every-list {
			height: 150upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.shop-top {
				.shop-name {
					font-size: 30upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42upx;
				}

				.shop-dress {
					font-size: 26upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34upx;
				}
			}

			.right-j-img {
				width: 18upx;
				height: 30upx;
			}



		}


	}
</style>
